<template>
  <div class="ad-form">
    <el-form size="mini" inline label-position="right" label-width="auto" ref="form" :model="form" v-loading="loading"
             :disabled="isDisableForm">
      <div class="ad-block">
        <el-row :gutter="14">
          <el-col :span="12">
            <el-form-item label="出发地：" prop="startCode" :rules="[{required: true, message: '请选择'}]">
              <ad-city-select v-model="form.startCode"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="目的地：" prop="destinationCode" :rules="[{required: true, message: '请选择'}]">
              <ad-city-select v-model="form.destinationCode"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="14">
          <el-col :span="12">
            <el-form-item label="公司名称：" prop="companyName" :rules="[{required: true, message: '请选择'}]">
              <ad-suggestion v-model="form.companyName" defaultProp="companyName" type="table" @select="selectLink"
                             @clear="removeLink"
                             :api="{method: getSuggestCompanyList, query: 'companyName'}"
                             :options="[{label: '委托联系电话', prop: 'linkmanPhone'},{label: '委托联系人', prop: 'linkmanName'},{label: '公司名称', prop: 'companyName'}]"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="网点城市：" prop="siteName" :rules="[{required: true, message: '请输入'}]">
              <el-input v-model="form.siteName" maxLength="10" placeholder="请输入"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="14">
          <el-col :span="12">
            <!--            <el-form-item label="联系人：" prop="linkman" :rules="[{required: true, message: '请输入'}]">-->
            <!--              <el-input v-model="form.linkman" maxLength="20" placeholder="请输入"/>-->
            <!--            </el-form-item>-->
            <el-form-item label="联系人：" prop="linkman" :rules="[{required: true, message: '请选择'}]">
              <ad-suggestion v-model="form.linkman" defaultProp="linkmanName" type="table" @select="selectLink" @clear="removeLink"
                             :api="{method: getSuggestCompanyList, query: 'linkmanName'}"
                             :options="[{label: '委托联系电话', prop: 'linkmanPhone'},{label: '委托联系人', prop: 'linkmanName'},{label: '公司名称', prop: 'companyName'}]"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <!--            <el-form-item label="联系电话：" prop="linkPhone" :rules="[{required: true, message: '请输入'}]">-->
            <!--              <el-input-number :controls="false" v-model="form.linkPhone" maxLength="13" placeholder="请输入"/>-->
            <!--            </el-form-item>-->
            <el-form-item label="联系电话：" prop="linkPhone" :rules="[{required: true, message: '请选择'}]">
              <ad-suggestion v-model="form.linkPhone" defaultProp="linkmanPhone" type="table" @select="selectLink" @clear="removeLink"
                             :api="{method: getSuggestCompanyList, query: 'linkmanPhone', startQueryCount: 4}"
                             :options="[{label: '委托联系电话', prop: 'linkmanPhone'},{label: '委托联系人', prop: 'linkmanName'},{label: '公司名称', prop: 'companyName'}]"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="14">
          <el-col :span="12">
            <el-form-item label="成本价格：" prop="cost" :rules="[{required: true, message: '请输入'}]">
              <el-input-number :controls="false" maxLength="8" v-model="form.cost" placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="利润价格：" prop="profit" :rules="[{required: true, message: '请输入'}]">
              <el-input-number :controls="false" maxLength="8" v-model="form.profit" placeholder="请输入"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="运输时效：" prop="days" :rules="[{required: true, message: '请输入'}]">
          <el-input-number :controls="false" v-model="form.days" maxLength="3"/>
        </el-form-item>
        <el-form-item label="联系地址：" prop="linkAddress">
          <el-input v-model="form.linkAddress" maxLength="30"/>
        </el-form-item>
        <el-form-item label="备注：" prop="remark">
          <el-input v-model="form.remark" type="textarea" :rows="2"/>
        </el-form-item>
      </div>
    </el-form>
    <div class="op">
      <el-button type="primary" :loading="saving" @click="save">保 存</el-button>
      <el-button type="primary" plain @click="cancel">取 消</el-button>
    </div>
  </div>
</template>

<script>
  import AdSuggestion from '@/components/AdSuggestion'
  import AdInputNumber from '@/components/AdInputNumber'
  import AdStatusSelect from '@/components/AdStatusSelect'
  import AdCitySelect from '@/components/AdCitySelect'
  import adForm from '@/mixins/adForm'
  import {add, edit, get} from '@/api/reviewPrice'
  import { getCompanyList as getSuggestCompanyList, getCompanyLineList as getSuggestCompanyLineList, getLinePrice } from '@/api/suggestion'

  class Form {
    startCode = null
    destinationCode = null
    companyName = ''
    siteName = ''
    cost = undefined
    days = undefined
    linkman = ''
    linkPhone = undefined
    linkAddress = ''
    profit = undefined
    remark = ''
  }

  export default {
    components: {AdInputNumber, AdStatusSelect, AdCitySelect, AdSuggestion},
    mixins: [adForm({get, add, edit})],
    watch: {
      // '$attrs.visible': {
      //   immediate: true,
      //   handler(visible) {
      //     let self = this;
      //     if (visible) {
      //       self.$nextTick(() => {
      //         self.$refs['form'].clearValidate();
      //       });
      //     }
      //   }
      // }
    },
    data() {
      return {
        form: new Form()
      }
    },
    created() {
    },
    methods: {
      getSuggestCompanyList,
      selectLink(link) {
        this.setLink(link)
      },
      removeLink() {
        this.form.companyId = ''
        this.form.companyName = ''
        this.form.linkmanId = ''
        this.form.linkmanName = ''
        this.form.linkmanPhone = undefined
        this.form.pickLinkmanName = ''
        this.form.pickLinkmanPhone = undefined
        this.form.canSlotPay = false
        this.suggestedCustomerLineList = []
      },
      setLink(link) {
        this.form.companyId = link.companyId
        this.form.companyName = link.companyName
        this.form.linkmanId = link.linkmanId
        this.form.linkman = link.linkmanName
        this.form.linkPhone = link.linkmanPhone
        this.form.canSlotPay = link.nature
      },
    }
  }
</script>

<style scoped>

</style>